<template>
    <div class="flash_answer">
        <!-- <div class="flash_asked_head"></div> -->
        <div class="flash_asked_cont">
            <dl :class="isM && $store.state.masterId ? 'flash_asked_cont_left' : 'flash_asked_cont_right'">
                <dt>
                    <img :src="userMsg.userPhoto | hasdomain" v-if="userMsg.userPhoto" alt="">
                </dt>
                <dd>
                    <p>{{userMsg.createtime}}</p>
                    <div class="content f26">
                        {{userMsg.question}}<br/>
                    </div>
                </dd>
            </dl><div class="clear"></div>
            <dl :class="isM && $store.state.masterId ? 'flash_asked_cont_left' : 'flash_asked_cont_right'">
                <dt>
                    <img :src="userMsg.userPhoto | hasdomain" v-if="userMsg.userPhoto" alt="">
                </dt>
                <dd>
                    <p>{{userMsg.createtime}}</p>
                    <div class="content f26">
                        姓名：{{userMsg.name}}<br/>
                        性别：{{userMsg.sex}}<br/>
                        出生日期：{{userMsg.birth}}<br/>
                        出生时辰：{{userMsg.birthTime}}<br/>
                        出生地：{{userMsg.areaName}}<br/>
                        <span v-if="userMsg.content">特殊说明：{{userMsg.content}}<br/></span>
                        选择数字：{{userMsg.threeNumber}}
                    </div>
                </dd>
            </dl><div class="clear"></div>
             <!-- v-if="userMsg.answer" -->
            <dl :class="isM && $store.state.masterId ? 'flash_asked_cont_right' : 'flash_asked_cont_left'">
                <dt>
                    <img src="@/assets/my/kefuimg.png" alt="">
                </dt>
                <dd>
                    <p>{{userMsg.readTime}}</p>
                    <div class="content f26">
                        订单已提交，系统将在20分钟内为您自动派单，请耐心等待！
                    </div>
                </dd>
            </dl><div class="clear"></div>
             <!-- v-if="userMsg.answer" -->
            <dl :class="isM && $store.state.masterId ? 'flash_asked_cont_right' : 'flash_asked_cont_left'">
                <dt>
                    <img src="@/assets/my/kefuimg.png" alt="">
                </dt>
                <dd>
                    <p>{{userMsg.readTime}}</p>
                    <div class="content f26">
                        {{userMsg.masterName}}老师已接收到您的问题，将会在2小时内为你解答。请耐心等候老师回复哦~~
                    </div>
                </dd>
            </dl>
            <div class="clear"></div>
            <dl :class="isM && $store.state.masterId ? 'flash_asked_cont_right' : 'flash_asked_cont_left'" v-if="userMsg.answer">
                <dt>
                    <img :src="userMsg.masterPhoto | hasdomain" alt="">
                </dt>
                <dd>
                    <p>{{userMsg.answerTime}}</p>
                    <div class="content f26">
                        我是{{userMsg.masterName}},下面为你解答。{{userMsg.answer}}
                    </div>
                    <div class="" v-if="!isM && !$store.state.masterId">
                        <span>满意评价</span>
                        <span>继续下单</span>
                    </div>
                </dd>
            </dl>
            <div class="clear"></div>
            <div class="comment evaluate" v-if="!ifPingJia" v-for="(val, key) in evaluationRecords" :key="key">
                <span>服务评分:</span><rater v-model="value" :fontSize="16" activeColor="#E73828" :max="5" :disabled="true"></rater><span>{{value}}.0分</span>
                <p class="user_remark">评价：{{val.userContent}}</p>
                <div class="user_remark_label" v-if="val.tag.length > 1">
                    <span class="user_remark_label_tit">标签:</span>
                    <ul>
                        <li v-for="(i, k) in val.tag" :key="k">{{i}}</li>
                    </ul>
                    <div style="clear:both"></div>
                </div>
                <div class="master_remark" v-if="val.masterReply">
                    <p class="master_remark_cont f26">
                        <i class="icon iconfont icon-tabshouqi1 f32"></i>
                        <span>{{val.masterName}}回复：</span>
                        {{val.masterReply}}
                    </p>
                </div>
            </div>
        </div>
        <div class="flash_asked_foot" v-if="isM & !userMsg.answer">
            <textarea v-model="textVal"></textarea>
            <button class="f28" @click="isMark(true)">发送</button>
        </div>
        <div class="mark" v-if="isShow">
            <div class="mark_msg">
                <p>确认发送吗？</p>
                <div class="btn">
                    <span @click="isMark(false)">取消</span>
                    <span @click="saveFqMasterAnswer()">确定</span>
                </div>
            </div>
        </div>
        <div class="evaluate" v-if="!isM & ifPingJia">
            <span class="f30">服务评分:</span><rater :fontSize="16" activeColor="#E73828" :max="5" v-model="value"></rater><span>{{value}}.0分</span>
            <div class="evaluate_label">
                <span class="f28">标签:</span>
                <ul>
                    <li class="f28" :class="checkArr.indexOf(val) !== -1 ? 'check_selected' : 'check'" v-for="(val, key) in checkerArr" :key="key" @click="checkLabel(val)">{{val}}</li>
                </ul>
            </div>
            <textarea class="remark" placeholder="请输入服务评语" v-model="remark"></textarea>
            <button class="send f26" @click="sendEvaluate()">发送</button>
        </div>
        <div class="comment evaluate" v-if="!ifPingJia" v-for="(val, key) in evaluationRecords" :key="key">
            <div class="master_reply" v-if="!val.masterReply & isM">
                <textarea v-model="textareaVal" placeholder="请输入回复评语"></textarea>
                <button @click="masterReplys(val.feedbackId)">发送</button>
            </div>
            <div class="flash_asked_btn" v-if="!isM && !$store.state.masterId">
                <span>满意评价</span>
                <span>继续下单</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {Rater } from 'vux'
    export default {
        name: 'flashAnswer',
        components: {
            Rater
        },
        data() {
            return {
                userMsg: {},
                textVal: '',
                isShow: false,
                value: 5,
                remark: '',
                isM: this.$route.query.isMaster,
                checkerArr: ['炒鸡耐心', '好评如潮', '有问必答', '名师高徒'],
                checkArr: [],
                evaluationRecords: [],
                ifPingJia: true,
                textareaVal: '',
            }
        },
        created() {
        },
        methods: {
            ///pay?step=1&id=893&from=qa
            againOrder() {
                this.$router.push({
                    path: '/pay',
                    query: {
                        step: 1,
                        id: '',
                        from: 'qa'
                    }
                })
            },
            openFqConsultance() {
                let params = {
                    masterId: this.$route.query.id ? this.$route.query.id : this.$store.state.masterId,
                    consultanceId: this.$route.query.ding
                }
                this.$http.fetchGet('openFqConsultance', params).then(res => {
                    if(res.code == 200) {
                        this.userMsg = res.data
                        this.ifEvaluate()
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            isMark(bool) {
                this.isShow = bool
            },
            saveFqMasterAnswer() {
                let val = this.textVal.replace(/(^\s*)|(\s*$)/g, "");
                if(val == ''){
                    this.$vux.toast.text('不能发送空白信息')
                } else {
                    let params = {
                        consultanceid: this.$route.query.ding,
                        answer: this.textVal
                    }
                    this.$http.fetchGet('saveFqMasterAnswer', params).then(res => {
                        if(res.code == 200) {
                            this.openFqConsultance();
                            this.$vux.toast.text('回复成功')
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                }
                this.isShow = false
            },
            checkLabel(val) {
                if(this.checkArr.indexOf(val) == -1) {
                    this.checkArr.push(val)
                } else {
                    this.checkArr.splice(this.checkArr.indexOf(val), 1)
                }
            },
            sendEvaluate() { // 用户发送评价
                let val = this.remark.replace(/(^\s*)|(\s*$)/g, "");
                if(val != '') {
                    let params = {
                        userId: this.userMsg.userId, // 用户id
                        // userName: this.userMsg.userName, // 用户名字
                        userContent: this.remark, // 用户评论内容
                        masterId: this.userMsg.masterid, // 大师id
                        // masterName: this.userMsg.masterName, // 大师名字
                        feedbackType: 6, // 类型
                        score: this.value, // 评分
                        tag: this.checkArr.join(','), // 标签
                        createTime: new Date().getTime(), // 创建时间
                        consultanceId: this.$route.query.ding
                    }
                    this.$http.fetchGet('getAddFeedback', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text(res.msg)
                            this.ifEvaluate()
                            this.ifPingJia = false
                            this.$router.push({
                                path: '/mdetail',
                                query: {
                                    id: this.dialogue.master.userId
                                }
                            })
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                } else {
                    this.$vux.toast.text('请输入评价内容')
                }
            },
            ifEvaluate() { //获取回复信息
                let params = {
                    id: this.$route.query.ding, // 工单id
                    userId: this.userMsg.userId, // 用户id
                    limit: '1', // 显示条数
                    offset: '0', // 偏移量
                    feedbackType: '6' // 类型
                }
                this.$http.fetchGet('getFeedback', params).then(res => {
                    if(res.code == 200) {
                        this.evaluationRecords = res.data;
                        if(res.data[0]) {
                            this.value = res.data[0].score*1;
                            this.evaluationRecords[0].tag = this.evaluationRecords[0].tag.split(',')
                        }
                    
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            masterReplys(id) { // 大师添加回复
                let val = this.textareaVal.replace(/(^\s*)|(\s*$)/g, "");
                if(val != '') {
                    let params = {
                        feedbackId: id,
                        masterReply: this.textareaVal,
                    }
                    this.$http.fetchGet('getAddMaster', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text('回复完成')
                            this.ifEvaluate()
                            // this.recorda()
                        } else {
                            console.log(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                } else {
                    this.$vux.toast.text('请输入评价内容')
                }
            }
        },
        mounted() {
            this.openFqConsultance()
            if(this.$route.query.isMaster) {
            }
            if(this.$route.query.status == '待评价') {
                this.ifPingJia = true
            } else if(this.$route.query.status == '已完成') {
                this.ifPingJia = false
            } else if(this.$route.query.status == '进行中') {
                this.ifPingJia = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .flash_answer{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
        .flash_asked_head{
            .h(88);
            .lh(88);
            width: 100%;
            border-bottom: 1px solid #f2f2f2;
            box-sizing: border-box;
            text-align: center;
        }
        .flash_asked_cont{
            flex: 1;
            width: 100%;
            overflow-y: scroll;
            .flash_asked_cont_left{
                .padd(10, 10);
                .mb(20);
                dt{
                    float: left;
                    width: 13%;
                    .mt(50);
                    img{
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                dd{
                    p{
                        text-align: center;
                    }
                    .content{
                        max-width: 70%;
                        background: #eee;
                        float: left;
                        .lh(50);
                        .padd(10, 10);
                        .ml(20);
                        .mt(40);
                        border-radius: 5px;
                        box-sizing: border-box;
                        word-break: break-all;
                    }
                    
                }
            }
            .clear{
                clear:both;
            }
            .flash_asked_cont_right{
                .padd(10, 10);
                dt{
                    float: right;
                    width: 13%;
                    .mt(50);
                    img{
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                dd{
                    p{
                        text-align: center;
                    }
                    .content{
                        float: right;
                        max-width: 70%;
                        background: #189BEB;
                        color: #fff;
                        .lh(50);
                        .padd(10, 10);
                        .mr(20);
                        .mt(40);
                        border-radius: 5px;
                        word-break: break-all;
                    }
                    
                }
            }
            .comment{
                .padd(0, 40);
                .pb(20);
                .pt(20);
                .mt(20);
                box-sizing: border-box;
                .user_remark{
                    .lh(60);
                }
                .master_remark{
                    min-width: 0;
                    .master_remark_cont{
                        .p(10);
                        .lh(60);
                        border-radius: 5px;
                        background: #eff9ff;
                        position: relative;
                        color: #333;
                        i.icon{
                            color: #eff9ff;
                            position: absolute;
                            top: -18px;
                            left: 10px;
                        }
                        span{
                            word-break: break-all;
                            color: #333;
                        }
                    }
                }
                .user_remark_label{
                    border-bottom: 1px solid #f2f2f2;
                    .user_remark_label_tit{
                        display: inline-block;
                        float: left;
                        .lh(40);
                    }
                    ul{
                        float: left;
                        .ml(10);
                        li{
                            float: left;
                            border: 1px solid #189BEB;
                            background: #189BEB;
                            .padd(4,6);
                            border-radius: 5px;
                            .mr(10);
                            .mb(10);
                            color: #fff;
                        }
                    }
                }
            }
        }
        .flash_asked_foot{
            .p(20);
            width: 100%;
            border-top: 1px solid #f2f2f2;
            box-sizing: border-box;
            text-align: center;
            textarea{
                box-sizing: border-box;
                width: 100%;
                .h(150);
                .p(10);
                resize:none;
                &:focus{
                    outline: none;
                }
            }
            button{
                width: 100%;
                .h(88);
                border: none;
                border-radius: 5px;
                background: #189BEB;
                color: #fff;
                .mt(20);
                &:focus{
                    outline: none;
                }
            }
        }
        .mark{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .mark_msg{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 70%;
                .h(300);
                background: #fff;
                p{
                    text-align: center;
                    .lh(212);
                }
                .btn{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    display: flex;
                    border-top: 1px solid #f2f2f2;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        &:nth-child(2){
                            border-left: 1px solid #f2f2f2;
                            color: #189BEB;
                        }
                    }
                }
            }
        }
        .evaluate{
            width: 100%;
            .padd(20, 20);
            box-sizing: border-box;
            border-top: 1px solid #f2f2f2;
            .evaluate_label{
                width: 100%;
                display: flex;
                .mt(10);
                span{
                    .w(90);
                    display: inline-block;
                    .lh(36);
                    float: left;
                }
                ul{
                    // width: 100%;
                    float: left;
                    .ml(10);
                    li{
                        float: left;
                        border: 1px solid #ccc;
                        .padd(4,6);
                        border-radius: 5px;
                        .mr(10);
                        .mb(10);
                    }
                }
                .check{
                    border: 1px solid #fff;
                }
                .check_selected{
                    border-color: #189BEB;
                    color: #189BEB;
                    .mr(10);
                    .mb(10);
                }
            }
            .remark{
                width: 100%;
                box-sizing: border-box;
                .h(120);
                border: none;
                border: 1px solid #f2f2f2;
                .p(10);
                .mt(10);
                resize:none;
                outline: none;
            }
            .send{
                width: 100%;
                .h(88);
                .mt(20);
                border: none;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
            }
            .flash_asked_btn{
                width: 100%;
                span{
                    display: inline-block;
                    .h(40);
                    .lh(40);
                    .padd(8, 10);
                    .ml(20);
                    border-radius: 5px;
                    &:nth-child(1) {
                        border: 1px solid #666;
                        color: #666;
                    }
                    &:nth-child(2) {
                        border: 1px solid #189BEB;
                        color: #fff;
                        background: #189BEB;
                    }
                }
            }
        }
        .comment{
            .padd(0, 20);
            .pb(20);
            .pt(20);
            box-sizing: border-box;
            .user_remark{
                .lh(60);
            }
            .master_remark{
                min-width: 0;
                .master_remark_cont{
                    .p(10);
                    .lh(60);
                    .mt(20);
                    border-radius: 5px;
                    background: #eff9ff;
                    position: relative;
                    color: #333;
                    i.icon{
                        color: #eff9ff;
                        position: absolute;
                        top: -18px;
                        left: 10px;
                    }
                    span{
                        word-break: break-all;
                        color: #333;
                    }
                }
            }
            .user_remark_label{
                border-bottom: 1px solid #f2f2f2;
                .user_remark_label_tit{
                    display: inline-block;
                    float: left;
                    .lh(40);
                }
                ul{
                    float: left;
                    .ml(10);
                    li{
                        float: left;
                        border: 1px solid #189BEB;
                        background: #189BEB;
                        .padd(4,6);
                        border-radius: 5px;
                        .mr(10);
                        .mb(10);
                        color: #fff;
                    }
                }
            }
            .master_reply{
                width: 100%;
                box-sizing: border-box;
                .mt(20);
                textarea{
                    width: 100%;
                    box-sizing: border-box;
                    .h(150);
                    resize:none;
                    outline: none;
                    border: 1px solid #f2f2f2;
                    border-radius: 4px;
                    .p(10);
                }
                button{
                    width: 100%;
                    .h(88);
                    border: none;
                    border-radius: 4px;
                    background: #189BEB;
                    color: #fff;
                    .mt(20);
                    outline: none;
                }
            }
        }
    }
</style>
